<template>
  <el-dialog
    :visible.sync="isVisible"
    title="编辑标题"
    width="320px"
    top="0"
    class="complaint__wrap"
    :close-on-click-modal="false"
    :append-to-body="true"
    :modal="true"
    custom-class="complaint__dialog"
  >
    <template slot="title">
      <div>小智AI投诉</div>
    </template>
    <ul class="complaint__tags">
      <li v-for="(it, i) in labelIds" :key="i" :class="{ on: it.value===form.label_id }" @click="form.label_id=it.value">{{ it.label }}</li>
    </ul>
    <el-input
      type="textarea"
      :rows="4"
      placeholder="在这里写下投诉的原因或您遇到的问题，限200字内"
      maxlength="200"
      resize="none"
      class="complaint__cont"
      @blur="form.content=$event.target.value.trim()"
      v-model="form.content">
    </el-input>
    <div class="complaint__edit-footer">
      <el-button type="success"
        @click="handleSubmit"
        :loading="submiting"
        :disabled="isDisabled">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getLabelList, submitFeedback } from '@/api/feedback'
export default {
  name: 'UserComplaint',
  data () {
    return {
      form: {
        label_id: '',
        content: ''
      },
      submiting: false,
      labelIds: []
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    data: {
      type: Object,
      default () { return {} }
    }
  },
  computed: {
    ...mapGetters(['appInfo', 'userInfo']),
    isVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    isDisabled () {
      return !this.form.label_id
    }
  },
  watch: {
    isVisible: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getLabelIds()
        }
      }
    }
  },
  methods: {
    getLabelIds () {
      let list = sessionStorage.getItem('feedback_label_list')
      if (list) {
        try {
          list = JSON.parse(list)
        } catch (e) {
          //
        }
      }
      if (list) {
        this.labelIds = list
        return
      }
      getLabelList({
        pro_id: this.appInfo.appID,
        mod_id: this.appInfo.appID === 111 ? 114 : 112, // 需要测试给我反馈ID
        page_index: 1,
        page_size: 30
      })
        .then(res => {
          const list = (res?.data?.data?.list || []).map(({ label_id: value, label_name: label }) => ({ value, label }))

          if (list.length) {
            sessionStorage.setItem('feedback_label_list', JSON.stringify(list))
          }

          this.labelIds = list
        })
    },
    handleSubmit () {
      this.submiting = true
      const formdata = new FormData()
      const params = Object.assign({}, this.form)
      const appInfo = this.appInfo
      const label_name = this.labelIds.find(({ value }) => value === params.label_id)?.label
      params.content_ids = [ params.label_id ]
      delete params.label_id
      if (label_name) {
        params.content = label_name + '-' + params.content
      }
      params.come_from = 3
      params.contact = ''
      params.pcid = appInfo.uuid
      params.version = appInfo.version
      params.appid = appInfo.appID
      params.union = appInfo.channel
      for (var k in params) {
        formdata.append(k, params[k])
      }
      this.$xz('HtmlClickReport', { ReportID: 7643 })
      const extParams = {
        scene: 7643,
        param10: params.content,
        param11: this.data.content,
        param12: this.data.conversionId,
        param13: this.data.model
      }
      this.$xz('HtmlEventSceneReport', { ReportID: 7643, data: extParams })

      submitFeedback(formdata)
        .then(() => {
          this.isVisible = false
          this.$PsMessage('已收到您的反馈, 我们将尽快优化')
        })
        .catch(() => {
          this.$psMessage('网络异常，请稍后再试')
        })
        .finally(() => {
          this.submiting = false
        })
    }
  }
}
</script>

<style lang="scss">
.complaint__wrap {
  top: calc((100% - 400px) / 2);
  background: #34353B;
  box-shadow: 0px 0px 20px 0px #00000026;
  color: #fff;

  .el-dialog__header {
    height: 20px;
    line-height: 20px;
    justify-content: space-between;
    padding: 16px 20px 10px;
    border-bottom: 1px solid #FFFFFF1A;
    font-size: 14px;
  }
  .el-dialog__headerbtn {
    color: rgba($color: #fff, $alpha: 0.8);
    cursor: pointer;
    &:hover{
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 16px 20px 30px;
  }
  .complaint__tags {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 200px;
    overflow: auto;
    li {
      padding: 6px 16px;
      line-height: 18px;
      font-size: 12px;
      border-radius: 10px;
      border: 1px solid #FFFFFF1A;
      cursor: pointer;
      &:hover {
        border-color: #fff;
      }
      &.on {
        border-color: $color-primary3;
        color: $color-primary3;
      }
    }
  }
  .complaint__cont textarea {
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 12px;
    line-height: 22px;
    height: 120px;
    color: #fff;
    background: #FFFFFF0D !important;
    &:hover, &:focus, &:active {
      border-color: $color-primary3;
    }
  }
  .complaint__edit-footer {
    margin-top: 20px;
    .el-button {
      display: block;
      width: 100%;
      border-radius: 10px;
    }
  }
}
</style>
